<template>
    <div id="app">
        <div id="top">
            <router-link to="/jueseadd">
                <el-button type="primary" size="large">新增角色</el-button>
            </router-link>
        </div>
        <div id="mid">
            <el-table :data="table.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
                <el-table-column type="index" label="序号" style="width: 10%" align="center" />
                <el-table-column prop="roleName" label="角色名称" style="width: 16%" align="center" />
                <el-table-column prop="userNumber" label="关联账号数" style="width: 16%" align="center" />
                <el-table-column prop="creator" label="创建人" style="width: 16%" align="center" />
                <el-table-column prop="creatTime" label="创建日期" style="width: 16%" align="center" />
                <el-table-column label="操作" style="width: 26%" align="center" >
                    <template #default="scoped">
                            <el-button link type="primary" size="small" @click="edit(scoped.row)">编辑</el-button>
                        <el-button text @click="dialogVisible = true">
                            <el-button link type="primary" size="small">删除</el-button>
                        </el-button>
                            <el-button link type="primary" size="small" @click="look(scoped.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <!-- 模态框 -->
    <el-dialog v-model="dialogVisible" title="删除确认" width="30%" :before-close="handleClose">
        <span>数据删除后不可恢复，确认是否删除？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="del()">
                   确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <div id="fenye" class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="table.length" @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" />
        </div>
</template>
<script lang="ts">
import { defineComponent,ref, onMounted, reactive, toRefs} from 'vue';
import { ElMessageBox, tabsEmits } from 'element-plus'
import axios from '@/util/http'
import { useRouter } from 'vue-router'


export default defineComponent({
    name: "middle",
    setup() {
        const router = useRouter();
        const handleClick = () => {
            console.log('click')
        };

        // const tableData = [
        //     {
        //         xuhao: '1',
        //         name: '疾控登记员',
        //         zhanghaoshu: '3',
        //         chuangjian: '系统',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '2',
        //         name: '疾控排查员',
        //         zhanghaoshu: '6',
        //         chuangjian: '王大力',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '3',
        //         name: '120驾驶员',
        //         zhanghaoshu: '7',
        //         chuangjian: '王仁',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '4',
        //         name: '隔离点工作人员',
        //         zhanghaoshu: '3',
        //         chuangjian: '李海',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '5',
        //         name: '居家监测管理人员',
        //         zhanghaoshu: '4',
        //         chuangjian: '张国寿',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '6',
        //         name: '疾控中心领导',
        //         zhanghaoshu: '2',
        //         chuangjian: '李梅',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '7',
        //         name: '通知公告发布',
        //         zhanghaoshu: '3',
        //         chuangjian: '汪峰',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '8',
        //         name: '统计分析员',
        //         zhanghaoshu: '8',
        //         chuangjian: '张海迪',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '9',
        //         name: '账号管理员',
        //         zhanghaoshu: '6',
        //         chuangjian: '博浩东',
        //         time: '2020-11-12',
        //     },
        //     {
        //         xuhao: '10',
        //         name: '组织管理院内',
        //         zhanghaoshu: '10',
        //         chuangjian: '李芳',
        //         time: '2020-11-12',
        //     },
        // ];

        const dialogVisible = ref(false)

        const handleClose = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }

        const each:any = reactive({
            id:''
        })
        let data:any=reactive([])
        let Table = reactive  ({
            table: []
        })
        onMounted(() => {
            axios({
                method: 'get', url:'/role/queryAllRoles', params: {
                    currentPage: 1,
                    pageSize: 1000
                }
            }).then((res) => {
                // console.log("成功");
                // console.log(res.data.data);
                Table.table = res.data.data
                res.data.data.forEach((itme)=>{
                    each.id=itme.roleId
                    data.push(JSON.parse(JSON.stringify(each)))
                 })
                // console.log(Table.table);
                // Table.table.forEach(element => {
                //     element.createDate
                // });
            })
        })
        //删除角色
        function del(){
            axios({
                method:'post',
                url:'/role/deleteRole',
                params:{
                    id:each.id
                }
            }).then((res)=>{
                    console.log(res);
                    console.log("成功");
                    dialogVisible.value = false
                    
                })
        }
        const edit = (obj) => {//编辑路由传参
            // obj=JSON.stringify(obj)
            console.log(obj);
            router.push({ name: 'juesedit', query: { key: JSON.stringify(obj) } });
        }


        const look = (obj) => {//查看路由传参
            // obj=JSON.stringify(obj)
            console.log(obj);
            router.push({ name: 'juesexiangqing', query: { key: JSON.stringify(obj) } });
        }
        const currentPage = ref(1)
        const pageSize = ref(10)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange1 = (val: number) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange1 = (val: number) => {
            console.log(`current page: ${val}`)
        }
        return {
            // tableData,
            handleClick,
            dialogVisible,
            handleClose,
            Table,
            ...toRefs(Table),
            edit,//编辑角色
            del,//删除角色
            look,//查看详情
            currentPage,
            pageSize,
            small,
            background,
            disabled,
            handleSizeChange1,
            handleCurrentChange1,
        }
    }

})


</script>
<style scoped>
#app {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    color: #333;
}

#mid {
    margin: 10px 35px;
}

#top {
    padding: 30px 35px;
}

#top>button {
    width: 127px;
    height: 40px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
#fenye {
    padding: 10px 35px;
    display: flex;
    justify-content: end;
    background-color: white;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
